<template>
	<view class="root f1 oh">
		<picker
			class="color-333 bgc-fff"
			mode="date"
			fields="month"
			:end="endTime"
			:style="{ padding: `32rpx 26rpx` }"
			@change="changeDate"
		>
			<view class="fd-row ai-baseline">
				<text class="fs-40 fw-600">{{ year }}</text>
				<label class="fs-24 ml-2 mr-2">年</label>
				<text class="fs-40 fw-600">{{ month }}</text>
				<label class="fs-24 inverted-triangle ml-2 mr-2">月</label>
			</view>
			<text class="fs-24 lh-2">本月总收益 ￥{{ Number(sumIncome).toFixed(2) }}</text>
		</picker>

		<scroll-view scroll-y class="f1 oh" @scrolltolower="getListData">
			<block v-for="(item, index) in bills.list" :key="index">
				<label class="height-2" />
				<label class="bgc-fff jc-sb" :style="{ padding: `32rpx 26rpx` }">
					<view>
						<text class="color-333 fs-26">
							{{ item.type | paymentMethodAndAmount(item.all_money) }}
						</text>
						<text class="color-999 fs-24 lh-2">{{ item.createtime_text }}</text>
					</view>
					<text class="color-f45455 fs-36 fw-600">
						+{{ Number(item.actual).toFixed(2) }}
					</text>
				</label>
			</block>
			<uni-load-more :status="loadStatus" />
			<label class="safe-area-inset-bottom" />
		</scroll-view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Pager } from "@/static/type";
	import { formatDate } from "@/static/libs/utils";

	let requestFlag: boolean = false;
	@Component({
		filters: {
			paymentMethodAndAmount(methodIndex: "0" | "1", amount: string) {
				const methods: string[] = ["微信支付", "余额支付"];
				return `${methods[+methodIndex]} ¥${Number(amount).toFixed(2)}`;
			},
		},
	})
	export default class Bill extends Vue {
		// component property
		endTime: string = formatDate("Y-M");
		year: string = formatDate("Y");
		month: string = formatDate("M");
		sumIncome: number = 0;
		bills: Pager<AnyObject> = { page: 1, list: [], size: 12 };
		loadStatus: string = "loading";

		onLoad() {
			this.getListData();
		}

		changeDate({ detail }: AnyObject) {
			const [year, month] = detail.value.split("-");
			this.year = year;
			this.month = month;
			this.bills.list = [];
			this.bills.page = 1;
			this.getListData();
		}

		getListData() {
			const { $request, bills } = this;

			if (requestFlag || !bills.page) return;
			(requestFlag = true), (this.loadStatus = "loading");

			$request
				.get("/shop/shopOrder", {
					page: bills.page,
					size: bills.size,
					date: `${this.year}-${this.month}`,
				})
				.then(({ data }) => {
					data.sum_income && (this.sumIncome = +data.sum_income);
					bills.list.push(...data.data);
					bills.page = data.current_page < data.last_page ? ++data.current_page : 0;
					this.loadStatus = bills.page ? "more" : "noMore";
					this.loadStatus = "noMore";
				})
				.finally(() => {
					requestFlag = false;
					bills.page > 1 || uni.stopPullDownRefresh();
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.inverted-triangle::after {
		content: "";
		margin: 6rpx;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 9rpx 9rpx 0 9rpx;
		border-color: #333 transparent transparent transparent;
	}
</style>